<template >
	<div class="contain" >
		<div class="contain-header">
			<el-breadcrumb  separator="/">
				<el-breadcrumb-item>订单管理</el-breadcrumb-item>
				<el-breadcrumb-item>寄件列表</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="mailingList-body">
			<div class="body-header">
				<div class="header-box" :class="isActive === 1? 'active' : ''" @click="changeTable(1)">待审核</div>
				<div class="header-box"  :class="isActive === 2? 'active' : ''"  @click="changeTable(2)">已审核</div>
			</div>
			<div class="body-table">
				<el-table
						:data="tableData"
						stripe
						style="width: 100%">
					<el-table-column
							align="center"
							prop="receiptName"
							label="收件人姓名">
					</el-table-column>
					<el-table-column
							align="center"
							label="收件人国家">
						<template slot-scope="scope">
							{{scope.row.receiptCountry === 1? '美国' : scope.row.receiptCountry === 2? '韩国' : scope.row.receiptCountry === 3? '日本' : scope.row.receiptCountry === 4? '新加坡' : '澳大利亚'}}
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							prop="logistics.name"
							label="委托物流商">
					</el-table-column>
					<el-table-column
							align="center"
							label="订单状态">
						<template slot-scope="scope">
							<el-tag :type="scope.row.sendStatus === 1? 'danger' : '' ">{{scope.row.sendStatus === 1 ? '未审核':'已审核'}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							label="操作">
						<template slot-scope="scope">
							<el-button v-if="scope.row.sendStatus === 1" type="warning " size="mini" @click="editDetails(scope.row.id)">编 辑</el-button>
							<el-button v-if="scope.row.sendStatus === 2" type="info"   size="mini" @click="seeDetails(scope.row.id)">查 看</el-button>
							<el-button v-if="scope.row.sendStatus === 2" type="success"  size="mini" @click="sumbitOrder(scope.row.id)">提 交</el-button>
							<el-button v-if="scope.row.sendStatus === 1"  type="primary" size="mini" @click="examineOrder(scope.row.id)">审 核 订 单</el-button>
<!--							<el-button v-if="scope.row.sendStatus === 1" type="danger" size="mini" @click="deleteOpen()">删 除 订 单</el-button>-->
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="body-page">
				<el-pagination
						background
						layout="prev, pager, next"
						@current-change="handleCurrentChange"
						:page-size="pageData.pageSize"
						:total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template >

<script >
	import { mailList, mailExamine, mailSumbit } from "../api/orderModules";
    import {logisticsAll} from "../api/logisticsModule";

    export default {
        name: "mailingList",
        data(){
            return{
                isActive:1,
                tableData: [],
				pageData:{
                    pageIndex: 1,
                    pageSize: 10,
                    sendStatus: 1
				},
                total:null
            }
        },
		mounted() {
            this.getPage()
        },
        methods:{
            //查询分页
            async getPage(){
                const { data } = await mailList(this.pageData)
				if (data.code === 200 ){
				    this.tableData =  data.data.data
					this.total = data.data.total
				}
			},
            //分页
            handleCurrentChange(val) {
                this.pageData.pageIndex = val
                this.getPage()
            },
			//切换tab
            changeTable(val){
                this.isActive = val
				if (val === 1) {
                  this.pageData.sendStatus = val
					this.getPage()
				} else {
                    this.pageData.sendStatus = val
                    this.getPage()
				}
            },
			//删除
            deleteOpen(){
                this.$confirm('此操作将永久删除该项,是否继续?', '删除', {
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() => {
                    this.$message({
                        type:'success',
                        message:'删除成功!'
                    })
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'撤销删除!'
                    })
                })
            },
			//审核订单
            examineOrder(id){
                this.$confirm('审核该订单,是否继续?', '提示', {
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() => {
                  mailExamine(id).then(res => {
                      if (res.data.code === 200) {
                          console.log(JSON.stringify({
                              id: 100004,
                              flag: true
                          }))
                          this.$message.success(res.data.message)
						  this.getPage()
					  }
				  })
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'撤销审核!'
                    })
                })
			},
            //提交订单
            sumbitOrder(id){
                this.$confirm('提交该订单,是否继续?', '提示', {
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() => {
                    mailSumbit(id).then(res => {
                        if (res.data.code === 200) {
                            this.$message.success(res.data.message)
                            this.getPage()
                        }
                    })
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'撤销提交!'
                    })
                })
            },
			//查看
            seeDetails(id){
                this.$router.push({
					name:'seeMail',
					query:{
					    id
					}
				})
			},
            //编辑
            editDetails(id){
                this.$router.push({
                    name:'editMail',
                    query:{
                        id
                    }
                })
            },
		}
    }
</script >

<style scoped lang="less">
	.mailingList-body{
		width: 100%;
		height: calc(100% - 50px);
		background-color: #ffffff;
		.body-header{
			width: 100%;
			height: 50px;
			display: flex;
			.active{
				background-color: rgb(0,150,136);
				color: #ffffff;
			}
			.header-box{
				width: 150px;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #ccc;
				cursor: pointer;
				&:nth-child(-n+1){
					border-right: none;
				}
			}
		}
		.body-table {
			width: 100%;
			max-height: calc(100% - 100px);
		}
		.body-page{
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
